<template>
    <div class="details-wrap">
        <!-- 客户信息 -->
        <div class="customer-info">
            <!-- header -->
            <div class="title">
                <div class="fl">
                    <span></span>
                    <span></span>
                </div>
                <p>客户信息</p>
            </div>
            <div class="content">
                <van-field
                v-model="carInfo.carNum"
                label="号牌号码"
                input-align="right"
                placeholder="请输入您的号牌号码"
                maxlength="10"
                @click="carNumInput"
                readonly 
                />
                <van-field
                v-model="carInfo.username"
                label="办理人"
                input-align="right"
                placeholder="请输入办理人的姓名"
                maxlength="4"
                />
                <van-field
                v-model="carInfo.mobile"
                type="tel"
                input-align="right"
                placeholder="请输入您的手机号"
                label="手机号码"
                />
                <van-field
                v-model="carInfo.code"
                label-align="right"
                input-align="right"
                type="number"
                clearable
                placeholder="请输入4位短信验证码"
                class="card-cell-validation"
                maxlength="4"
                >
                    <span class="fl" slot="label">验证码</span>

                    <van-button
                        slot="label"
                        size="small"
                        color="#ea4d18"
                        type="primary"
                        class="validation"
                        @click="sendVerifyCode"
                    >
                        <Countdown ref="Countdown" class="times"></Countdown>
                    </van-button>
                </van-field>
                <van-field
                v-model="carInfo.recipientAddress"
                label="收件地址"
                input-align="right"
                placeholder="请输入收件地址"
                />
            </div>
        </div>
        <!-- 行驶证信息 -->
    	<div class="drivers-license bg-fff">
      		<!-- header -->
			<div class="title">
				<div class="fl">
					<span></span>
					<span></span>
				</div>
				<p>行驶证信息</p>
			</div>
      		<div class="uploader" @click="upCarImgFront">
        		<div class="box boxz">
          			<uploadImg class="uploadImg" :upData='upData' @upload="picurl"/>
          			<div class="icon">
            			<div class="bg" v-show="carInfo.carImgFront === ''"></div>
          			</div>
					<div class="bottom" v-if="carInfo.carImgFront === ''">
						<span>拍照上传行驶证主页</span>
						<span>上传后自动识别内容</span>
					</div>
					<div class="text bg-fff" v-else>
						<img :src="carInfo.carImgFront" class="img-contain" />
					</div>
        		</div>
      		</div>
      		<p class="tips">上传行驶证照片</p>
			
    	</div>
        <div class="details-wrap">
            <div class="title">
				<div class="fl">
					<span></span>
					<span></span>
				</div>
				<p>保险信息<span @click="showInsurance">(点击查看交强险上传照片实例)</span></p>
			</div>
            <div class="insurance">
                <div class="uploader" @click="upImgPolicy">
                    <div class="insurance_box ">
                        <upFile class="uploadImg" :upData='upData' @upload="picurl"/>
                        <div class="icon bx" v-if="!carInfo.imgPolicy"></div>
                        <div class="text bg-fff" v-else>
                            <img :src="carInfo.imgPolicy" :alt="fileName" class="img-contain" />
                            <!-- <img 
                            v-if="fileType != 'application/pdf'" 
                            :src="carInfo.imgPolicy" 
                            :alt="fileName" 
                            class="img-contain" 
                            />
                            <div v-else>{{fileName}}</div> -->
                        </div>
                    </div>
                </div>
                <p class="tips_insurance">上传电子保险PDF文件，纸质保险拍照上传交强险页</p>
                <div class="agreement-info">
                    <van-checkbox v-model="agreementChecked" shape="square" checked-color="#ea4d18" class="fl">
                        <span>我已阅读并同意</span>
                    </van-checkbox>
                    
                    <span class="color" @click="vehicleClick">《服务协议》</span>
                </div>
            </div>
        </div>
        <van-button color="#27b5a7" class="btn-submit" :loading="loading" type="primary" @click="addCars" block>提交</van-button>
        <foot :navUrl="url"/>
        <!--键盘弹出-->
        <van-popup v-model="showInputCarNumber" position="bottom">
            <plateNumber @getPlateLicense="getPlateLicense"></plateNumber>
        </van-popup>
        <!--保险照片实例弹出-->
        <van-dialog v-model="insurance" title="保单照片实例" confirmButtonText="返回">
            <div class="wrapper">
                <img src="@/assets/img/bdsl.jpg" alt="">
            </div>
        </van-dialog>
        
    </div>
</template>

<script>
import Countdown from '@/components/countdown/index'
import plateNumber from '@/components/plateNumber/index'
import { getLocal } from '@/utils/storage'
import foot from '@/views/footer.vue'
import uploadImg from '@/components/upFile/uploadimg'
import upFile from '@/components/upFile/upFile'
import crypto from "crypto";
export default {
    name: 'InspectionFree',
    data() {
        return {
            carNumErrNum:0,
            upData:null,
            insurance:false,
            input_show:false,//是否弹出填写所有人信息提示框
            agreementChecked:false,//是否勾选服务协议
            loading:false,
            fileName:null,//文件名
            fileType:null,//文件类型
            carInfo: {
                userId: null,
				carNum: null, // 号牌号码
				username:null,//客户姓名
				mobile:null,//手机号码
                code:null,//验证码
                recipientAddress:null,//收件地址
				carImgFront: null, // 行驶证正面
				imgPolicy: null, // 保险单
				verifySecondaryPage:1,//判定是否需上传副页
            },
            showInputCarNumber:false,
            loading:false,
            url:'/'
        }
    },
    computed: {
        
    },
    created() {
        console.log(this.$route, '----  编辑状态进入 车辆详情 --------')
        if (this.$route.params.carInfo) {
            console.log(this.$route.params)
            this.carInfo = this.$route.params.carInfo
            this.agreementChecked = this.$route.params.agreementChecked
        }
    },
    methods: {
        // 服务协议 点击跳转页面
		vehicleClick() {
			this.$router.push({
				name: 'agreement',
				params: {
					carInfo: this.carInfo,
					type:'inspectionFree',
					agreementChecked:this.agreementChecked
				}
			})
		},
        
        //交强险上传
		upImgPolicy(){
			console.log('点击了交强险上传')
			// 固定参数携带
			const times = new Date().getTime();
			const md5 = crypto.createHash("md5");
			md5.update(times + "35e5c1b47ce3");
			let sign = md5.digest("hex")
			let timestamp = times
			this.upData = {
                type: 'imgPolicy',
                uploadsType:1,
                carNum:this.carInfo.carNum,
				uploads:this.carNumErrNum,
				userId:JSON.parse(getLocal('userInfo')).id,
                sign:sign,
				timestamp:timestamp
			}
		},
        //显示保单案例
        showInsurance(){
            this.insurance = true
        },
        //主页分片上传
		upCarImgFront(){
			console.log('点击了行驶证上传')
			// 固定参数携带
			const times = new Date().getTime();
			const md5 = crypto.createHash("md5");
			md5.update(times + "35e5c1b47ce3");
			let sign = md5.digest("hex")
			let timestamp = times
			this.upData = {
                type: 'front',
                uploadsType:4,
				carNum:this.carInfo.carNum,
				uploads:this.carNumErrNum,
				userId:JSON.parse(getLocal('userInfo')).id,
				sign:sign,
				timestamp:timestamp
			}
		},
        //接收子组件url
    	picurl(val){
        	console.log('-------------行驶证识别-------------------',val)
        	let obj = val.data
      		if (val.status == 200 && obj) {
				this.$toast.clear()
        		if (val.str === 'front') {
                    /*** 行驶证主页*/
					this.carInfo.verifySecondaryPage  = obj.carInfo.verifySecondaryPage
					this.carInfo.carImgFront          = obj.urlData
         			 
        		} else{
                    /***保险单信息**/
                    this.fileType = val.fileType
                    this.carInfo.imgPolicy = obj.urlData
                    this.fileName = obj.fileName
                }
        		this.$toast('上传成功！')
      		} else {
				this.$toast.clear()
        		if (val.status == 320) {
					this.$toast({
						duration: 4000,
						message:'您上传的行驶号牌与您输入的号牌号码不一致，请仔细核对'
					})
            		//this.iserror = true
					console.log('this.carNumErrNum------------',this.carNumErrNum)
					this.carNumErrNum = this.carNumErrNum+1
					console.log('this.carNumErrNum------------',this.carNumErrNum)
				}else{
					this.$toast({
						duration:4000,
						message:val.message
					})
				}
     	 	}
        },
        
        carNumInput(){
            this.showInputCarNumber = true
        },
        getPlateLicense(data){
            console.log('组件传出的data',data)
            this.carInfo.carNum = data
            this.showInputCarNumber = false
        },
        // 提交预约
    	async createOrder(items) {
			let params = {
				stationId: 1,
				carId: items.id,
				userId: items.userId,
                orderType:7
            }
            this.loading = true
            let res = await this.$api.createOrder(params)
            this.loading = false
      		if (res.status === 200) {
				this.$router.push({
					name: 'orderPay',
					params: {
						carInfo: res.data
					}
				})
      		}
    	},
        // 添加车辆信息  提交
    	async addCars() {
            console.log(this.carInfo,this.agreementChecked,'------------- this.carInfo-----------')
            this.carInfo.type = 1
            this.carInfo.whetherHide = 0
            this.carInfo.userId = JSON.parse(getLocal('userInfo')).id
      		let res = null
			if (this.validationFn()) {
				return
			} else {
                this.loading = true
                res = await this.$api.addCars(this.carInfo)
                this.loading = false
          		console.log(res, '------------------- 添加车辆信息 ----------------')
        		if (res && res.status === 200) {
					this.$toast('提交成功正在拉取订单！')
					let edit = getLocal('edit')
					this.createOrder(res.data)
				}
      		}
    	},
        // 发送短信验证码
        async sendVerifyCode() {
            if (!this.$refs.Countdown.countNum) {
                let res = await this.$api.sendVerifyCode({
                phone: this.carInfo.mobile
                })
                if (res.status === 200) {
                this.$refs.Countdown.countDown(true, 60)
                }
                console.log(res, '------------------- 发送短信验证码 ----------------')
            } else {
                this.$toast('不能重复发送验证码')
            }
        },
        // -------------------------------------提交验证---------------------------------
        validationFn() {
            let c = this.carInfo
            console.log(c, '----验证')
            let s = '信息不正确！'
            if (!this.carInfo.carNum) {
                this.$toast('号牌号码' + s)
                return true
            }
            if (this.carInfo.username === '' || this.carInfo.username === null) {
                this.$toast('办理人' + s)
                return true
            }
            if (this.carInfo.code === '' || this.carInfo.code === null) {
                this.$toast('验证码' + s)
                return true
            }
            if (!this.carInfo.recipientAddress) {
                this.$toast('收件地址' + s)
                return true
            }
            if (!c.carImgFront || c.carImgFront === '') {
				this.$toast('请上传行驶证照片')
				return true
			}
            if (!c.imgPolicy || c.imgPolicy === '') {
				this.$toast('请上传交强险文件或照片')
				return true
            }
            if (!this.agreementChecked) {
				this.$toast('请阅读并同意《服务协议》')
				return true
			}
        }
    },
    components: {
        Countdown,
        foot,
        plateNumber,
        uploadImg,
        upFile
    }
}
</script>

<style lang="less" scoped>
    .tips{
        font-size: 0.35rem;
        line-height: 0.6rem;
        color:red;
        width: 95%;
        margin:1rem auto 0 auto;
    }
    .sum{
        position: absolute;
        right: 1rem;
        top:calc(44px * 3.5);
        z-index: 999;
        line-height: 44px;
        font-size: 0.4rem;
        transform: translateY(-50%);
    }
    .errorColor{
        color:red;
        border-bottom: 1px solid red!important;
    }
    //提示
    .prompt{
        font-size: 0.35rem;
        text-align: center;
        color:red;
        position: fixed;
        left: 0;
        top:0;
        width: 100%;
        z-index: 999;
        background-color: #efefef;
        line-height: 1rem;
    ;
    }

    .details-wrap {
        background-color: #f0f0f0;
        padding-bottom: 0.48rem;
        // 最小字体
        .small-font {
            font-size: 0.16rem;
            transform: scale(0.83, 0.83);
            -webkit-text-size-adjust: 100%;
        }
        .title {
            height: 1.12rem;
            background-color: #f0f0f0;
            div {
                margin: 0.333rem 0 0 0.2rem;
                span {
                    width: 0.133rem;
                    height: 0.533rem;
                    background-color: #fff;
                    display: inline-block;
                }
                span:nth-of-type(2) {
                    background-color: #009a44;
                    
                }
            }
            p {
                font-size: 0.587rem;
                color: #000;
                height: inherit;
                line-height: 1.22rem;
                text-indent: 0.227rem;
                i{
                    font-size: 0.35rem;
                }
                span{
                    color: red;
                    font-size: 0.4rem;
                    line-height: 0.8rem;
                    display: inline-block;
                }
            }
        }
        /deep/ .van-uploader,
        /deep/ .van-uploader .van-uploader__wrapper,
        /deep/ .van-uploader .van-uploader__input-wrapper {
            width: 100%;
        }
        // 客户信息
        .customer-info {
            .van-cell {
                border-bottom: 1px solid #bbb;
            }

            .content {
                .van-cell {
                height: 1.147rem;
                line-height: 1.147rem;
                padding: 0 16px;
                /deep/ .van-field__control {
                    height: 1.147rem;
                    line-height: 1.147rem;
                }
                /deep/ .van-cell__title {
                    span {
                        font-size: 0.48rem;
                    }
                }
            }
            // 验证码
            .card-cell-validation {
                /deep/ .van-cell__title {
                    width: 52%;
                    display: flex;
                }
                .validation {
                    margin-left: 0.2rem;
                    height: 0.667rem;
                    line-height: 0.667rem;
                    vertical-align: middle;
                    padding: 0 4px;
                    min-width: auto;
                    border-radius: 0.107rem;
                    border: 0;
                    margin-top: 0.2rem;
                    /deep/ .times {
                        // .small-font;
                        font-size: 0.32rem;
                    }
                }
            }
        }
    }
    
    .btn-submit {
        width: 80%;
        font-size: 0.64rem;
        letter-spacing: 1.093rem;
        border-radius: 0.16rem;
        margin: 1rem auto 0;
        background-color: rgb(234, 77, 24);
        border: 0;
        span {
            margin-left: 15%;
        }
    }
    // 驾驶证信息
  .drivers-license {
    padding-bottom: 0.32rem;
    .tips{
      font-size: 0.6rem;
      font-weight: 600;
      text-align: center;
      margin: 0.3rem 0;
    }
    
    div.uploader {
      width: 8.267rem;
      height: 4.053rem;
      margin: 0.187rem auto 0;
      border-radius: 0.16rem;
      border: 0.027rem dashed #949494;
      .uploadImg{
        width: 8.267rem;
        height: 3.76rem;
        position: absolute;
        left: 0;
        top:0;
        z-index: 2;
      }
      .box {
        width: 8rem;
        height: 3.76rem;
        margin: 0.133rem;
        position: relative;
        .text {
          display: table-cell;
          height: inherit;
          vertical-align: middle;
          img {
            width: 100%;
            max-width: 100%;
            max-height: 100%;
            display: block;
            margin: auto;
          }
        }
        .icon {
          width: 100%;
          height: inherit;
          position: absolute;
          top: 0;
          left: 0;
          .bg {
            width: 1.493rem;
            height: 1.493rem;
            border-radius: 50%;
            background: url('../../assets/img/icon/camera.png') center center
              no-repeat #ea4d18;
            background-size: 60%;
            margin: 0.56rem auto 0;
          }
        }
        .bottom {
          width: 100%;
          height: 1.693rem;
          position: absolute;
          bottom: 0;
          left: 0;
          span {
            display: block;
            text-align: center;
            font-size: 0.307rem;
          }
          span:nth-of-type(1) {
            font-size: 0.4rem;
            font-weight: 500;
            margin: 0.24rem 0 0.267rem;
          }
        }
      }
      
    }
  }
    .boxz{
      background: url('../../assets/img/xsz.png');
      background-size: 8rem 3.76rem;
      background-repeat: no-repeat;
    }
    
    // 服务协议
    .agreement-info {
        width: 90%;
        margin: 0.4rem auto;
        display:flex;
        span {
        font-size: 0.48rem;
        }
        .color {
        color: #f60b16;
        }
    }
    /**
    保单案例 
    */
    .wrapper{
        text-align: center;
        img{
            max-width: 90%;
            max-height: 60vh;
        }
    }
    .insurance{
        background-color: #fff;
        padding: 0.3rem 0;
        .uploader{
            width: 8.267rem;
            height: 4.5rem;
            margin: 0.187rem auto 0;
            border-radius: 0.16rem;
            position: relative;
            .uploadimg {
                width: 90%;
                height: 5rem;
                position: absolute;
                left: 5%;
                top: 0;
                
            }
            .insurance_box{
                width: 100%;
                height: 100%;
                border: 1px dotted #999;
                padding: .1rem;
                box-sizing: border-box;
                .icon{
                    width: 100%;
                    height: 100%;
                    background: url('../../assets/img/bd.jpg')center/cover no-repeat;
                }
                
                .text{
                    width: 100%;
                    height: 100%;
                    text-align: center;
                    div{
                        width: 100%;
                        padding: 0.2rem .1rem 0.2rem 1.2rem;
                        box-sizing: border-box;
                        border: 1px solid #333;
                        white-space:normal;
                        word-break:break-all;
                        overflow:hidden;
                        text-align: left;
                        background:url(../../assets/img/icon/pdf.png)0.2rem center no-repeat;
                        background-size:0.8rem 1rem;
                    }
                }
            }
            
        }
        .tips_insurance{
            font-size: 0.4rem;
            font-weight: 600;
            text-align: center;
            margin: 0.3rem 0;
            line-height: 0.6rem;
            color: red;
        }
    }
}
</style>
